<template>
  <div class="demo">
    <div class="demo-title">包含子组件</div>
    <div class="demo-content">
      <Skeleton :loading="loading">
        <div>
          <h4>Ant Design Vue, a design language</h4>
          <p>
            We supply a series of design principles, practical patterns and high quality design
            resources (Sketch and Axure), to help people create their product prototypes beautifully
            and efficiently.
          </p>
        </div>
      </Skeleton>
      <Button :disabled="loading" @click="showSkeleton">Show Skeleton</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Skeleton from '@sscd/skeleton';
  const loading = ref<boolean>(false);
  const showSkeleton = () => {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 3000);
  };
</script>

<style lang="less" scoped>
  .demo {
    h4 {
      margin-bottom: 16px;
    }
    button {
      margin-top: 16px;
    }
  }
</style>
